<template>
  <div id="analysis">
    <div class="flexarea">
      <div class="right">
        <div class="title">
          <p>{{ currentQuestionIndex + 1 }} / {{ total }}</p>
          <span>解析查看中</span>
        </div>

        <div class="question-wrapper">
          <transition :name="transitionName" mode="out-in">
            <div class="content" v-if="currentQuestion">
              <p class="topic">
                <span class="number">{{ currentQuestionIndex + 1 }}</span>
                {{ currentQuestion.content }}
              </p>

              <div v-if="currentQuestion.type === 1">
                <el-radio-group v-model="currentQuestion.answer" disabled>
                  <el-radio :label="'option1'">{{ currentQuestion.option1 }}</el-radio>
                  <el-radio :label="'option2'">{{ currentQuestion.option2 }}</el-radio>
                  <el-radio :label="'option3'">{{ currentQuestion.option3 }}</el-radio>
                  <el-radio :label="'option4'">{{ currentQuestion.option4 }}</el-radio>
                </el-radio-group>
              </div>

              <div v-else-if="currentQuestion.type === 0">
                <p class="fill-answer">正确答案：{{ currentQuestion.answer }}</p>
              </div>

              <div v-else-if="currentQuestion.type === 2">
                <el-radio-group v-model="currentQuestion.answer" disabled>
                  <el-radio :label="'T'">正确</el-radio>
                  <el-radio :label="'F'">错误</el-radio>
                </el-radio-group>
              </div>

              <div class="analysis">
                <p><strong>解析：</strong>{{ currentQuestion.analysis }}</p>
              </div>
            </div>
          </transition>
        </div>

        <div class="operation">
          <ul class="end">
            <li @click="previous" :disabled="currentQuestionIndex === 0">
              <i class="iconfont icon-previous"></i><span>上一题</span>
            </li>
            <li @click="next">
              <span>下一题</span><i class="iconfont icon-next"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [],
      currentQuestionIndex: 0,
      transitionName: 'slide-right'
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentQuestionIndex] || {}
    },
    total() {
      return this.questions.length
    }
  },
  created() {
    try {
      const stored = localStorage.getItem('questionList')
      this.questions = stored ? JSON.parse(stored) : []
    } catch (e) {
      this.$message.error('解析数据加载失败')
    }
  },
  methods: {
    previous() {
      if (this.currentQuestionIndex > 0) {
        this.transitionName = 'slide-left'
        this.currentQuestionIndex--
      }
    },
    next() {
      if (this.currentQuestionIndex < this.total - 1) {
        this.transitionName = 'slide-right'
        this.currentQuestionIndex++
      } else {
        this.$confirm('已查看所有题目，是否返回首页？', '结束查看', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$router.push('/student')
        }).catch(() => {})
      }
    }
  }
}
</script>

<style scoped>
.question-wrapper {
  position: relative;
  height: 470px;
  overflow: hidden;
}
.slide-left-enter-active,
.slide-right-enter-active,
.slide-left-leave-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-left-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
.slide-right-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.slide-right-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.analysis {
  margin-top: 20px;
  background: #f9f9f9;
  padding: 10px;
  border-left: 4px solid #2776df;
}
.fill-answer {
  font-weight: bold;
  margin: 10px 0;
  color: #2776df;
}
.content .topic {
  padding: 20px 0;
}
.content .number {
  background-color: #2776df;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 6px;
}
.operation .end {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.operation .end li {
  margin: 0 20px;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid #2776df;
  border-radius: 4px;
  color: #2776df;
  transition: all 0.3s;
}
.operation .end li:hover {
  background-color: #2776df;
  color: #fff;
}
.right .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 50px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: bold;
}
</style>
